import React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Button,
  FlatList,
  SafeAreaView,
  TouchableWithoutFeedback,
  Image,
} from 'react-native';
import {scaleSizeW, scaleSizeH, setSpText} from '@/util/screen';
import heart from '@/images/workout/heart.png';
import heart_n from '@/images/workout/heart_n.png';
import {timeFormat} from '@/util/time';

export default props => {
  const {item, index, navigation} = props;

  return (
      <TouchableWithoutFeedback
          onPress={() => {
            if (index === 0) {
              navigation.navigate('SubClasses',{item: item});
            } else {
              navigation.navigate('scheduleDetail');
            }
          }}>
        <View style={styles.item}>
          <Image
              style={styles.icon}
              resizeMode="cover"
              source={{
                uri: item.images,
              }}
          />
          <View style={styles.infos}>
            <Text style={styles.title}>{item.name.toUpperCase()}</Text>
            {/*<Text style={styles.name}>SELINA</Text>*/}
            <View style={styles.items}>
              <Image
                  resizeMode="contain"
                  source={heart_n}
                  style={styles.items_icon}
              />
              <Image
                  resizeMode="contain"
                  source={heart}
                  style={styles.items_icon}
              />
            </View>
            {/*<Text style={styles.cost}>BEGINNER | 30M</Text>*/}
            <Text style={styles.create}>{timeFormat(item.createdDate)}</Text>
            <View style={styles.items}>
              <Image
                  resizeMode="contain"
                  source={heart_n}
                  style={styles.items_icon}
              />
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  item: {
    flex:1,
    height: scaleSizeH(420),
    backgroundColor: '#fff',
    marginTop: scaleSizeH(30),
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: scaleSizeW(64),
    paddingVertical: scaleSizeH(60),
    alignItems: 'center',
    width: scaleSizeW(750),
  },
  icon: {
    width: scaleSizeW(280),
    height: scaleSizeH(420),
    backgroundColor: '#f9f9f9'
  },
  infos: {
    // paddingTop: scaleSizeH(65),
    // paddingBottom: scaleSizeH(70),
  },
  title: {
    fontSize: setSpText(32),
    color: '#000000',
    marginBottom: scaleSizeH(35),
    textAlign: 'right',
    fontWeight: 'bold',
  },
  name: {
    fontSize: setSpText(24),
    color: '#333333',
    textAlign: 'right',
    marginBottom: scaleSizeH(35),
  },
  items: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginBottom: scaleSizeH(35),
    // backgroundColor:'#e1e1e1'
  },
  items_icon: {
    width: scaleSizeW(44),
    height: scaleSizeH(44),
    marginLeft: scaleSizeW(10),
  },
  cost: {
    fontSize: setSpText(24),
    color: '#777777',
    textAlign: 'right',
    fontWeight: '500',
  },
  create: {
    fontSize: setSpText(24),
    color: '#999999',
    textAlign: 'right',
    marginBottom: scaleSizeH(35),
  },
});
